<template>
    <div class="index">
        <div class="login_box">
            <!-- 总订单 -->
            <div>
                <i class="el-icon-document ico1"></i>
                <span>
                    <strong>总订单</strong>
                   {{todayOrder}}
                </span>
            </div>
            <!-- 销售总额 -->
            <div>
                <i class="el-icon-coin ico2"></i>
                <span>
                    <strong>总销售额</strong>
                    {{totalAmount}}
                </span>
            </div>
            <!-- 今日订单数 -->
            <div>
                <i class="el-icon-s-order ico3"></i>
                <span>
                    <strong>今日订单数</strong>
                    {{totalOrder}}
                </span>
            </div>
            <!-- 今日销售额 -->
            <div>
                <i class="el-icon-s-marketing ico4"></i>
                <span>
                    <strong>今日销售额</strong>
                    {{totayAmount}}
                </span>
            </div>
        </div>

        <div ref="box" id="box"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { indexInfo } from '@/api/index.js';
export default {
    data() {
        return {
            todayOrder:"",
            totalAmount:"",
            totalOrder:"",
            totayAmount:"",

        }
    },

    async mounted() {
        let res = await indexInfo()
        console.log(res);
        const myChart = echarts.init(this.$refs.box);
        this.todayOrder=res.data.todayOrder
        this.totalAmount=res.data.totalAmount
        this.totalOrder=res.data.totalOrder
        this.totayAmount=res.data.totayAmount
        // 绘制图表
        myChart.setOption({
            title: {
                text: "数据统计",
                top: 15,
                left: 8,
            },
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: ["订单", "销售额", ],
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
        
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: res.data.xData,
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    name: "订单",
                    type: "line",
                    stack: "Total",
                    data: res.data.amountData,
                },
                {
                    name: "销售额",
                    type: "line",
                    stack: "Total",
                    data: res.data.orderData,
                },
                
            ],
           
        });
        // 根据窗口变化图标自适应
        window.onresize=function(){
            myChart.resize()
        }
    },

    // 声明周期函数
    destroyed(){
        window.onresize=null//组件销毁时子弹去除resize事件
    }
};
</script>

<style lang="less" scoped>
.login_box {
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
        width: 24%;
        height: 100%;
        display: flex;
        background-color: #fff;
        align-items: center;
        justify-content: space-around;

        i {
            font-size: 60px;
        }

        span {
            height: 100%;
            display: flex;
            align-content: stretch;
            align-items: center;
            flex-wrap: wrap;
            font-weight: bold;

            strong {
                display: block;
                padding: 0 5px;
                border-left: 5px solid #ccc;
                width: 100%;
                color: #ccc;
            }

        }

        .ico1 {
            color: #1296db;
        }

        .ico2 {
            color: #ec4175;
        }

        .ico3 {
            color: #0ae7b7;
        }

        .ico4 {
            color: #0ee90e;
        }
    }
}

#box {
    width: 100%;
    height: 650px;
    margin-top: 20px;
    background-color: #fff;
}
</style>